<template>
  <h1>EL-菜单组件</h1>
  <el-menu
    background-color="#4F8DFE"
    text-color="#fff"
    active-text-color="#ffd04b"
    default-active="3"
    mode="horizontal"
    @select="handleSelect"
  >
    <el-menu-item index="1">首页</el-menu-item>
    <el-menu-item index="2">用户</el-menu-item>
    <el-menu-item index="3">商品</el-menu-item>
    <el-menu-item index="4">订单</el-menu-item>
    <el-menu-item index="5">报表</el-menu-item>
    <el-sub-menu index="6">
      <template #title>
        更多操作
      </template>
      <el-menu-item index="6-1">新增</el-menu-item>
      <el-menu-item index="6-2">删除</el-menu-item>
      <el-menu-item index="6-3">修改</el-menu-item>
      <el-sub-menu index="6-4">
        <template #title>
          更多操作
        </template>
        <el-menu-item index="6-4-1">新增</el-menu-item>
        <el-menu-item index="6-4-2">删除</el-menu-item>
        <el-menu-item index="6-4-3">修改</el-menu-item>
        <el-menu-item index="6-4-4">查询</el-menu-item>
      </el-sub-menu>
    </el-sub-menu>
  </el-menu>
</template>

<script setup>
const handleSelect = (index, indexPath) => {
  console.log(index, indexPath);
}
</script>

<style scoped>

</style>
